<template>
    <li class="base-goods">
        <a href="#">
            <div class="pic"><img :src="imgUrl" alt="" /></div>
            <div class="txt">
            <h4>{{ name }}</h4>
            <p>¥ <span>{{ price }}</span></p>
            </div>
        </a>
    </li>
</template>

<script>
export default {
    props: {
        imgUrl: String,
        name: String,
        price: String,
    }
}
</script>

<style scoped>
.base-goods {
  width: 304px;
  height: 404px;
  background-color: #EEF9F4;
}
.base-goods {
  display: block;
}
.base-goods .pic {
  width: 304px;
  height: 304px;
}
.base-goods .txt {
  text-align: center;
}
.base-goods h4 {
  margin-top: 17px;
  margin-bottom: 8px;
  font-size: 20px;
}
.base-goods p {
  font-size: 18px;
  color: #AA2113;
}
.base-goods p span {
  font-size: 22px;
}
</style>